<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city" placeholder="请输入城市的名字（中文或拼音）" @change="getData()" />
    </div>
</template>
<script>
import axios from "axios"
import { KEY, API_CITY } from "@/common/constrant"
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            city: ""
        }
    },
    methods: {
        ...mapActions([
            "updateLocationAction"
        ]),
        getData() {
            axios.get(API_CITY, {
                params: {
                    key: KEY,
                    location: this.city
                    }
                })
                .then(res => {
                console.log(res.data)
                //通过dispatch修改状态的state
                //this.$store.dispatch("updateLocationAction",res.data.location[0])
                this.updateLocationAction(res.data.location[0])
                //跳过action直接从vue component组件中commit提交mutation
                //this.$store.commit("updateLocationMutation",res.data.location[0])
                //this.updateLocationMutation(res.data.location[0])
                console.log(this.$store.state.location)
            })
        },
    }
}
</script>
<style scoped>
#city {
    width: 20rem;
    display: inline-block;
}
</style>